@extends('layouts.mobile_main')

@section('title', "支付密码")

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/public.css?v={{env('CSS_VERSION')}}">
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}css/passwordkeyboard.css?v={{env('CSS_VERSION')}}" type="text/css" />
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}css/check.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
@endsection

@section('content')
<header class="pay_sure oh" style="background-color: #fff;">
    <a class="fl" href="javascript:history.go(-1);">
        <img class="fl" src="{{env('IMAGE_DOMAIN')}}/images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
    </a>
    <span class="fl co_violet fz_48 setpass" style="margin-left: 2.9rem;">输入支付密码</span>
</header>
<div style="text-align: center;padding-top: 10px;">
    <span id="set_text" style="font-size: large;"></span>
</div>

<div style="padding-top: 20px;text-align: center;">
    <form id="password" >
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass pass_right" type="password"maxlength="1" value="">
    </form>
</div>
<p id="password_massage" class="fz_50" style="text-align: center;color: red;margin-top: 1.5rem;"></p>
<div id="keyboardDIV"></div>

@endsection
@section('scriptResources')
    @parent
    <script type="text/javascript">
    $(function(){
        var shopid = '{{$shopid}}';
        var money = '{{$money}}';
        var passwords = $('#password').get(0);
        $(function(){
            var div = '\
            <div id="key" style="position:absolute;background-color:#A8A8A8;width:99.5%;bottom:0px;">\
                <ul id="keyboard" style="font-size:20px;margin:2px -2px 1px 2px">\
                    <li class="symbol"><span class="off">1</span></li>\
                    <li class="symbol"><span class="off">2</span></li>\
                    <li class="symbol btn_number_"><span class="off">3</span></li>\
                    <li class="tab"><span class="off">4</span></li>\
                    <li class="symbol"><span class="off">5</span></li>\
                    <li class="symbol btn_number_"><span class="off">6</span></li>\
                    <li class="tab"><span class="off">7</span></li>\
                    <li class="symbol"><span class="off">8</span></li>\
                    <li class="symbol btn_number_"><span class="off">9</span></li>\
                    <li class="cancle btn_number_">取消</li>\
                    <li class="symbol"><span class="off">0</span></li>\
                    <li class="delete lastitem">删除</li>\
                </ul>\
            </div>\
            ';
            var character,index=0;  $("input.pass").attr("disabled",true);  $("#password").attr("disabled",true); $("#keyboardDIV").html(div);
            $('#keyboard li').click(function(){
                if ($(this).hasClass('delete')) {
                    $(passwords.elements[--index%6]).val('');
                    if($(passwords.elements[0]).val()==''){
                        index = 0;
                    }
                    return false;
                }
                if ($(this).hasClass('cancle')) {
                    window.location.href="javascript:history.go(-1)";
                }
                $(this).animate({
                    top: "1px",
                    left: "1px"
                },100,function(){
                    $(this).animate({
                    top: "0",
                    left: "0"
                },100)})

                if ($(this).hasClass('symbol') || $(this).hasClass('tab')){
                    character = $(this).text();
                    $(passwords.elements[index++%6]).val(character);
                    if($(passwords.elements[5]).val()!=''){
                        index = 0;
                    }
                    if($(passwords.elements[5]).val()!='') {
                        var temp_rePass_word = '';

                        for (var i = 0; i < passwords.elements.length; i++) {
                            temp_rePass_word += $(passwords.elements[i]).val();
                        }
                        check_pass_word = temp_rePass_word;
                        // $("#key").hide();

                        $.ajax({
                            url :"/mobile/wallet/pay/shopin/result" ,
                            type:'post',
                            data: {
                                shopid : shopid,
                                money:money,
                                paypassword:check_pass_word
                            },
                            dataType:'json',
                            success:function(data){
                                if(data.status == 'success') {
                                    var data = data.data;
                                    var orderNumber = data.ordernumber;
                                    var status = data.status;
                                    if(status == '2') {
                                        //买单成功
                                        window.location.href="/mobile/wallet/pay/end?ordernumber=" + orderNumber;
                                    } else if(status == '1') {
                                        //余额不足
                                        window.location.href="/mobile/wallet/recharge";
                                    } else if(status == '3') {
                                        //超过次数
                                        alert("你在本店买单次数已用完");
                                    }
                                } else {
                                    // alert(data.message);
                                    $("#password_massage").html(data.message);
                                    setTimeout(function(){
                                       location.reload(); 
                                   },1000);
                                }
                            }
                        });
                    }
                }
                return false;
            });
            // var pass=true;//控制创建密码还是确认密码
            // if(pass){
            //     $(".setpass").show();
            //     $(".sureagain").hide();
            // }else{
            //     $(".setpass").hide();
            //     $(".sureagain").show();
            // }
        });
    })
    </script>
@endsection
